﻿/****************************** Module Header ******************************\
* Plus Name:  JqComboBox.js
* Plus Version:  1.0.0 (2012-7-11)
* Copyright (c) AnyEB.Com (14507247@qq.com)
* 
* This plus used to option the combo webcontrols.
* Note: 从第一版的CatalogComboBox,到第二版的TreeListComboBox,到这个JqCombo,
*  开发一个自己满意的分类下拉选择框一直是自己不断追求的一个目标，而今总算
*  能暂时舒缓一口气了。以后不用再看着分类选择框纠结了哈。(天澜.2012-7-11)
* == 更新日志 ==
* 2012-9-20     修改适用于JDCS调用功能
* 2012-10-23    修改适用于Ajax调用的功能
* 
* This source is subject to the GPL License.
* See http://www.gnu.org/licenses/gpl.html.
* All other rights reserved.
* 
* THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, 
* EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE IMPLIED 
* WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A PARTICULAR PURPOSE.
\***************************************************************************/

/*
Json Standard:[{n:'name1',v:'value1',c:[{n:'name11',v:'value11',c:[]}]}]
$('#tb').JqComboBox({data:<?php echo GetJson(); ?>,value:'a68aa1cf-dc51-4f3e-bc08-6c8466647d8a',autoID:true});
*/

(function ($) {
    $.fn.extend({
        'JqComboBox': function (options) {
            if (!$(this)[0]) return;
            options = $.extend({ value: '', data: [], height: 240, width: 210, debug: false, valueControl: null,autoID:false }, options);
            var $tb = $(this);
            var $tbv = options.valueControl ? $(options.valueControl) : $('<input type="hidden" name="' + $tb.attr('name') + 'ID" />');
            if(options.autoID) $tb.attr('name', $tb.attr('name') + 'Name');
            $tb.after($tbv);
            var $data = $(ParseToDom(options.data));

            // css define
            $tb.after($data).wrap('<div style="position:relative;"></div>');
            $data.css({ 'diaplay': 'none', 'position': 'absolute', 'z-index': '999', 'border': 'solid 1px #CCC', 'background-color': '#FFF', 'height': options.height, 'width': options.width, 'overflow': 'auto' });
            $data.find('ul').css('margin', '0px');
            $data.find('div').css({ 'border-top': 'dotted 1px #CCC', 'padding': '5px' });
            $data.find('div').hover(function () { $(this).css('background-color', '#efefef'); }, function () { $(this).css('background-color', '#FFF'); });
            $data.find('.lvl1>div:first').css('border', 'none')
            $data.find('.lvl2 div').css('padding-left', '10px');
            $data.find('.lvl3 div').css('padding-left', '30px');
            $data.find('.lvl4 div').css('padding-left', '40px');
            $data.find('.lvl5 div').css('padding-left', '50px');
            $data.find('.lvl6 div').css('padding-left', '60px');
            $data.hide();

            // set value
            if (!options.value && $tb.val()) options.value = $tb.val();
            if (!options.value) options.value = '00000000-0000-0000-0000-000000000000';
            $tbv.val(options.value);
            var $a = $data.find('a[title="' + options.value + '"]');
            $tb.val($a.text());
            $a.parent().css('background-color', '#efefef');

            // event
            $tb.click(function () {
                $data.toggle();
            });
            $data.find('span').css('cursor', 'pointer').click(function () {
                var $this = $(this);
                if ($this.text() == "[-]") {
                    $this.text('[+]');
                    $this.parent().next('ul').hide();
                } else {
                    if ($this.text() !== '[+]') return;
                    $this.text('[-]');
                    $this.parent().next('ul').show();
                }
            });
            $data.find('a').click(function () {
                var $this = $(this);
                $tbv.val($this.attr('title'));
                $tb.val($this.text());
                $data.hide();
            });
            // Json to Dom
            function ParseToDom(data, n) {
                if (!n) var n = 0;
                n++;
                var str = '<ul class="lvl' + n + '">';
                if (n == 1) str += '<li><div><a href="###" title="00000000-0000-0000-0000-000000000000">请选择分类</a></div></li>';
                for (var i = 0; i < data.length; i++) {
                    var o1 = data[i];
                    str += '<li><div>';
                    if (o1.c.length > 0) str += '<span>[-]</span>';
                    str += '<a href="###" title="' + o1.v + '">' + o1.n + '</a></div>';
                    if (o1.c.length == 0) {
                        str += '</li>';
                        continue;
                    }
                    str += ParseToDom(o1.c, n);
                    str += '</li>';
                }
                str += '</ul>';
                return str;
            }
        }
    })
})(jQuery);